<!DOCTYPE html>
<?php
     $xdata = array(
        'foo'    => 'bar',
        'baz' => array('green','blue')
     );
?>
<html>
    <head>
        <meta charset="UTF-8">
          <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);
      google.load("visualization", "1", {packages:["corechart"]});
     

  function drawChart() 
  {
      
      var xdata = <?php echo json_encode($xdata); ?>;

    alert(xdata['foo']);
    alert(xdata['baz'][0]);

    // Dot notation can be used if key/name is simple:
    alert(xdata.foo);
    alert(xdata.baz[0]);
    
    var options = {
        vAxis: {
                title: 'temps (ms)',
                viewWindowMode: 'explicit',
                viewWindow: {
                    max: 36,
                    min: 0,
                },
                gridlines: {
                    count: 5,
                }
            },
            // main stuff
            title: 'Stacked histogram\nTotals',
            viewWindowMode:'explicit',
            viewWindow:{
                //max:36,
                min:0
            },
            backgroundColor: {strokeWidth: 1 },  // to draw a nice box all around the chart
            isStacked: 'true'                    //  = rowstacked in gnuplot
        };
        
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var dataTable = new google.visualization.DataTable();
    
    dataTable.addColumn('string', 'Test ID');
    dataTable.addColumn('number', 'English');               // English bar
    dataTable.addColumn({type: 'string', role: 'tooltip'}); // English tooltip
    dataTable.addColumn('number', 'Math');                  // Math bar
    dataTable.addColumn({type: 'string', role: 'tooltip'}); // Math tooltip
    dataTable.addColumn('number', 'Reading');               // Reading bar
    dataTable.addColumn({type: 'string', role: 'tooltip'}); // Reading tooltip
    dataTable.addColumn('number', 'Science');               // Science bar
    dataTable.addColumn({type: 'string', role: 'tooltip'}); // Science tooltip
    
    dataTable.addRows([
        ['1', 8, 'first', 8, 'sec', 8, 'third', 9, 'fouth'],
        ['', 0, 'first', 0, 'sec', 0, 'third', 0, 'fouth']
    ]);
    
    chart.draw(dataTable, options);
    }
    </script>
        <title></title>
    </head>
    <body>
        <div id="chart_div"></div>
    </body>
</html>
